<template>
	<view class="login">
		<view class="logo">
			<view class="">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<text style="color: #999999;font-size: 16px;font-weight: 600;margin-top:16rpx;display: block;">豪圣国际</text>
		</view>
		<view class="title">
		</view>
		<u-form :model="formData" ref="uForm" :error-type="errorType">
			<u-form-item prop="name">
				<u-input 
				placeholder="请输入账号"
				:custom-style='inputStyle'
				placeholder-style="color: #cdcdf5;font-weight: 600;opacity: 0.2;" 
				v-model="formData.name" />
			</u-form-item>
			<u-form-item prop="pwd">
				<u-input 
				placeholder="请输入登录密码"
				type='password' 
				:custom-style='inputStyle'
				placeholder-style="color: #cdcdf5;font-weight: 600;opacity: 0.2;" 
				v-model="formData.pwd" />
			</u-form-item>
		</u-form>
		<u-button 
		:class="{activeSubmit:formData.name && formData.pwd}" 
		:hair-line="btnBorder" 
		class="submit" 
		@click="submit">登录</u-button>
		<view class="btn">
			<view class="registered">还没有账号？<text @click="registered">注册</text></view>
			<view @click="go">忘记密码</view>
		</view>
		<!--Toast提示框-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnBorder:false,
				inputStyle:{color:'#cdcdf5'},
				errorType: ['message','border-bottom'],
				formData: {
					name: '',
					pwd: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					pwd: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			
		},
		methods: {
			//忘记密码
			go(){
				uni.navigateTo({
				    url: '/pages/SecuritySettings/index?type=zhaohui'
				});
			},
			//注册
			registered(){
				//console.log('点击注册')
				uni.redirectTo({
				    url: '/pages/Registered/index'
				});
			},
			//登录
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						//console.log('验证通过');
						this._submit()
					} else {
						//console.log('验证失败');
					}
				});
			},
			//登录方法
			_submit(){
				const _this = this
				this.$http({
					url:this.$api.login,
					method:'POST',
					data:this.formData,
					success:res=>{
						uni.setStorage({
						    key: 'userInfo',
						    data: {token:res.token,username:res.username},
						    success: function () {
								uni.switchTab({
								    url: '../Index/index'
								});
						    },
							fail:function(){
								_this.$refs.uToast.show({
									title: '登录失败',
									type: 'error'
								})
							}
						});
					},
					fail:err=>{
						//console.log('失败返回------',err)
					}
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	.login{
		padding: 0 50rpx;
		
		.logo {
			margin-top: 15vh;
			margin-bottom: 50rpx;
			text-align: center;
			image{
				width: 140rpx;
				height: 160rpx;
			}
		}
		.title{
			text-align: center;
			font-size: 18px;
			color: #999999;
			margin-bottom: 10rpx;
		}
		.submit{
			background-color: rgba(205,205,245,0.2);
			color: rgba(255,255,255,0.2);
			margin-top: 80rpx;
			border-color: #181818;
			font-size: 18px;
			font-weight: 600;
			height: 42px;
		}
		.activeSubmit{
			color: #FFFFFF;
			background-color: #5f6aff;
		}
		.btn{
			display: flex;
			justify-content: flex-end;
			color: #5f6aff;
			margin-top: 40rpx;
			font-weight: 600;
			.registered{
				width: 100%;
				position: fixed;
				bottom: 80rpx;
				left: 0;
				text-align: center;
				color: #4f5066;
				text{
					color: #5f6aff;
				}
			}
		}
		::v-deep .u-iconfont{
			color: #C0C0C0;
		}
		::v-deep .u-form-item__message{
			position: absolute;
			right: 46rpx;
			bottom: 10rpx;
			color: #FFFFFF;
		}
		::v-deep .u-border-bottom:after{
			border-color: rgba(255,255,255,0.2);
		}
		::v-deep .u-form-item{
			padding: 50rpx 0 0rpx 0;
		}
		::v-deep .uicon-eye-fill:before{
			content: '';
			background: url(../../static/icon/pwd.png)left center no-repeat;
			background-size: 100% 100%;
			width: 34rpx;
			height: 23rpx;
		}
		::v-deep .uicon-eye:before{
			content: '';
			background: url(../../static/icon/pwdb.png)left center no-repeat;
			background-size: 100% 100%;
			width: 34rpx;
			height: 23rpx;
		}
	}
</style>
